<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>设置</title>
    <link rel="stylesheet" href="../common/style/reset.css" />
    <style>

      /* 滚动槽 */
      ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }
      ::-webkit-scrollbar-track {
        border-radius: 3px;
        background: transparent;
        /* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.08); */
      }
      /* 滚动条滑块 */
      ::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: var(--bg-select);
        -webkit-box-shadow: inset 0 0 10px var(--shadow-color);
      }


      .card-item{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 20px;
        padding-bottom: 8px;
      }

      .card-item ~ .card-item{
        border-top: 1px solid var(--bg-list-color);
        padding: 8px 0;
      }

      .card-item:hover .card-content-box {
        width: calc(100% - 30px);
      }

      .card-item:hover .card-item-delete{
        width: 30px;
      }

      .card-content-box{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: all 0.3s linear;
      }

      .card-item-delete{
        width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s linear;
      }

      .card-content{
        width: calc(100% - 50px);
        display: flex;
        align-items: center;
      }

      .switch-box{
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .title-content{
        width: 52px;
      }

      .doc-content{
        width: calc(100% - 52px);
        font-size: 12px;
        color: #918a8a;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-left: 10px;
      }

      .card-list{
        width: 100%;
        height: calc(100% - 50px);
        overflow-y: auto;
      }

      .card-footer{
        width: 100%;
        display: flex;
        align-items: center;
      }

      .bg-transparent{
        flex: 1;
      }

      .add-alarm-clock{
        font-size: 25px;
        margin-left: 10px;
      }

      .cover-edit{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        display: none;
        justify-content: center;
        align-items: center;
        border-radius: 15px;
      }

      .alarm-clock-edit{
        width: 85%;
        height: 85%;
        border-radius: 15px;
        background-color: var(--bg-color);
        box-shadow: 0 0 10px var(--shadow-color);
        padding: 20px 10px 10px 10px;
        overflow-y: auto;
      }

      .alarm-clock-time{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 25px;
      }

      .alarm-clock-time input{
        background-color: transparent;
        outline: none;
        border: none;
        width: 40%;
        text-align: center;
        color: var(--font-color);
        font-size: 25px;
      }

      .alarm-clock-remark-title{
        margin-bottom: 10px;
      }

     
      .alarm-clock-remark-box{
        font-size: 14px;
        margin-top: 15px;
      }

      .alarm-clock-remark{
        outline: none;
        background-color: var(--bg-contenteditable);
        min-height: 50px;
        padding: 5px;
        overflow-y: auto;
        border-radius: 5px;
        font-size: 12px;
      }

      .alarm-clock-remark:empty:before{
        content: attr(data-placeholder);
        color: #999;
        /* display: block;  */
      }

      .alarm-clock-remark:focus:before,
      .alarm-clock-remark:not(:empty):before {
        content: none;
      }


      .alarm-clock-sound-box{
        width: 100%;
        display: flex;
        align-items: center;
        font-size: 14px;
        justify-content: space-between;
        margin-top: 15px;
      }

      .alarm-clock-btn-box{
        font-size: 25px;
        display: flex;
        justify-content: space-around;
        color: var(--font-color);
        margin-top: 20px;
      }

      .alarm-clock-btn-box div{
        padding: 10px;
        border-radius: 50%;
        box-shadow: 0 0 10px var(--shadow-color);
      }

      .alarm-filter-box{
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center; 
        margin-top: 15px;
      }

      .alarm-filter-box liu-cascader{
        width: 120px;
      }

      .alarm-filter-box option{
        padding: 5px 0;
      }

      .alarm-filter-box option ~ option{
        border-top: 1px solid #2d2f3e;
      }

      .pop-ups-box{
        padding: 10px 0;
      }

      .pop-ups-title{
        color: rgba(145, 138, 138, 0.5);
      }

      .pop-ups-item{
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px 0;
      }

    </style>
  </head>
  <body>
    <tab-win>
      <div class="card-list">
      </div>
      <div class="card-footer">
        <div class="bg-transparent">
          <liu-slider value="100"></liu-slider>
        </div>
        <div class="add-alarm-clock">
          <icon-svg name="add"></icon-svg>
        </div>
      </div>
      <div class="cover-edit">
        <div class="alarm-clock-edit">
          <div class="alarm-clock-time">
            <input class="alarm-clock-hour" max="23" maxlength="2" type="number" value="13">:
            <input class="alarm-clock-minute" max="59" maxlength="2" type="number" value="14">
          </div>
          <div class="alarm-clock-remark-box">
            <div class="alarm-clock-remark-title">备注：</div>
            <div class="alarm-clock-remark" data-placeholder="请输入备注..." contenteditable="plaintext-only"></div>
          </div>
          <div class="alarm-filter-box">
            <div class="alarm-filter-title">重复</div>
            <liu-cascader value="once" customize="true" rule="^[1-7]{1,7}$" placeholder="">
              <option value="once">只响一次</option>
              <option value="day">每天</option>
              <option value="[1,2,3,4,5]">周一至周五</option>
              <option title="智能跳过法定节假日" value="law">法定工作日</option>
            </liu-cascader>
          </div>
          <div class="alarm-clock-sound-box">
            <div class="alarm-clock-sound-title">声音</div>
            <liu-switch class="alarm-clock-sound" width="40" height="20"  checked="true"></liu-switch>
          </div>
          <div class="pop-ups-box">
            <div class="pop-ups-title">弹窗</div>
            <div class="pop-ups-item">
              <div class="pop-ups-item-title">全屏</div>
              <liu-switch class="full-screen" width="40" height="20" checked="true"></liu-switch>
            </div>
            <div class="pop-ups-item">
              <div class="pop-ups-item-title">随机图片</div>
              <liu-switch class="random-img" width="40" height="20" checked="false"></liu-switch>
            </div>
            <div class="pop-ups-item">
              <div class="pop-ups-item-title">自定义图片</div>
              <div class="img-btn">上传</div>
            </div>
          </div>
          <div class="alarm-clock-btn-box">
            <div class="alarm-clock-closure"><icon-svg name="closure"></icon-svg></div>
            <div class="alarm-clock-sure"><icon-svg name="sure"></icon-svg></div>
          </div>
        </div>
      </div>
    </tab-win>
  </body>
  <script type="module">
    import { saveBaseImg, getBaseImg, removeBaseImg } from '../common/utils/storage_imp.js'
    import IconSvg from "../components/IconSvg/IconSvg.js";
    import TabWin from "../components/Window.js";
    import LiuSwitch from "../components/Switch.js";
    import LiuSlider from "../components/Slider.js";
    import LiuCascader from '../components/Cascader.js';
    customElements.define("icon-svg", IconSvg);
    customElements.define("tab-win", TabWin);
    customElements.define("liu-switch", LiuSwitch);
    customElements.define("liu-slider", LiuSlider);
    customElements.define("liu-cascader", LiuCascader);


    let data = [
      {
        hour: 8,
        minute: 30,
        sound: true,
        remark: "这是一个备注",
        fullScreen: true,
        randomImg: false,
        switch: false,
        urls: [],
        type: 'once'
      }
    ];
    let transparent = 100;
    let index = null;
    let urls = [];

    if(window.ipcRenderer){
      window.ipcRenderer.on('init', (event, res) => {
        data = res.list || data;
        transparent = res.transparent || 100;
        liuSliderEl.setAttribute('value', transparent);
        renderList();
      });
    }


    const cardListEl = document.querySelector(".card-list")
    const addAlarmClockEl = document.querySelector(".add-alarm-clock");
    const coverEditEl = document.querySelector(".cover-edit");
    const alarmClockHourEl = document.querySelector(".alarm-clock-hour");
    const alarmClockMinuteEl = document.querySelector(".alarm-clock-minute");
    const alarmClockRemarkEl = document.querySelector(".alarm-clock-remark");
    const alarmClockSoundEl = document.querySelector(".alarm-clock-sound");
    const fullScreenEl = document.querySelector(".full-screen");
    const randomImgEl = document.querySelector(".random-img");
    const alarmClockClosureEl = document.querySelector(".alarm-clock-closure");
    const alarmClockSureEl = document.querySelector(".alarm-clock-sure");
    const imgBtnEl = document.querySelector(".img-btn");
    const liuCascaderEl = document.querySelector("liu-cascader");
    const liuSliderEl = document.querySelector("liu-slider");
    liuSliderEl.onchange = (e) => {
      transparent = e.detail.value;
      toParent()
    }

    const renderList = () => {
      cardListEl.innerHTML = ''
      let html = ''
      data.forEach((item,index)=>{
        let hour = item.hour.toString().length > 1 ? item.hour : '0' + item.hour;
        let minute = item.minute.toString().length > 1 ? item.minute : '0' + item.minute;
        let cardItem = document.createElement('div');
        cardItem.className = 'card-item';
        cardItem.setAttribute('data-index', index);
        let str = `
          <div class="card-content-box" data-index="${index}">
            <div class="card-content">
              <div class="title-content">${hour}:${minute}</div>
              <div class="doc-content">${item.remark}</div>
            </div>
            <div class="switch-box" data-index="${index}">
              <liu-switch  checked="${item.switch}"></liu-switch>
            </div>
          </div>
          <div class="card-item-delete" data-index="${index}">
            <icon-svg name="closure"></icon-svg>
          </div>
        `
        cardItem.innerHTML = str;
        cardItem.querySelector('.switch-box liu-switch').onchange = (e) => {
          let checked = e.detail.checked;
          data[index].switch = checked;
          data[index].state = false;
          toParent();
        }
        cardItem.querySelector('.card-content').onclick = (e) => {
          editAlarmClock(index);
        }
        cardItem.querySelector('.card-item-delete').onclick = (e) => {
          removeBaseImg(data[index].urls)
          data.splice(index, 1);
          toParent();
          renderList();
        }
        cardListEl.appendChild(cardItem);
      })
    }

    const toParent = () => {
      if(window.toParentPage){
        window.toParentPage(data, {transparent});
      }
    }

    imgBtnEl.onclick = function (){
      if (window.utools) {
        let files = window.utools.showOpenDialog({
          filters: [
            { name: 'Images', extensions: ['jpg', 'png', 'gif', 'webp', 'jpeg']}
          ],
          properties: ["openFile", "multiSelections"],
        });
        if(files){
          urls = files.map(item=>{
            let uid = 'alarmClock' + new Date().getTime();
            return uid + '?' + item;
          });
        }else{
          return;
        }
      }
    }
    

    const addAlarmClock = () => {
      let hour = parseInt(alarmClockHourEl.value || 0);
      let minute = parseInt(alarmClockMinuteEl.value || 0);
      let remark = alarmClockRemarkEl.innerText;
      let sound = alarmClockSoundEl.checked;
      let fullScreen = fullScreenEl.checked;
      let randomImg = randomImgEl.checked;
      let type = liuCascaderEl.value;
      let bool = urls.every(item=>data[index]?.urls.some(el=> el === item));
      if(!bool){
        saveBaseImg(urls, /alarmClock\d+\?/)
      }

      if(index === 0 || index){
        if(!bool){removeBaseImg(data[index].urls);}
        data[index].hour = hour;
        data[index].minute = minute;
        data[index].remark = remark;
        data[index].sound = sound;
        data[index].fullScreen = fullScreen;
        data[index].randomImg = randomImg;
        data[index].switch = true;
        data[index].state = false;
        data[index].urls = urls;
        data[index].type = type;
      } else {
        data.push({
          hour,minute,remark,sound,fullScreen,randomImg, switch: true, state: false, urls, type
        })
      }

      
      renderList();
      toParent();
      closureEdit();
      urls = [];
    }


    const editAlarmClock = (i) => {
      index = i ? i : (i === 0 ? 0 : null);
      if (parseInt(i) || i === 0) {
        alarmClockHourEl.value = data[i].hour.toString().length > 1 ? data[i].hour : '0' + data[i].hour;
        alarmClockMinuteEl.value = data[i].minute.toString().length > 1 ? data[i].minute : '0' + data[i].minute;
        alarmClockRemarkEl.innerText = data[i].remark;
        alarmClockSoundEl.setAttribute('checked',data[i].sound);
        fullScreenEl.setAttribute('checked',data[i].fullScreen);
        randomImgEl.setAttribute('checked',data[i].randomImg);
        liuCascaderEl.setAttribute('value', data[i].type)
        urls = data[i].urls;
      }else{
        let date = new Date();
        let hour = date.getHours();
        let minute = date.getMinutes();
        urls = [];
        alarmClockHourEl.value = hour.toString().length > 1 ? hour : '0' + hour;
        alarmClockMinuteEl.value = minute.toString().length > 1 ? minute : '0' + minute;
      }
      coverEditEl.style.display = 'flex';
    }

    const filterNum = (e, num) => {
      const value = e.target.value;
      if (value > num) {
        e.target.value = num;
      }
      if (value < 0) {
        e.target.value = 0;
      }

      if (value.length > 2) {
        e.target.value = value.slice(0, 2);
      }
    };

    const closureEdit = () => {
      coverEditEl.style.display = 'none';
      alarmClockHourEl.value = '00';
      alarmClockMinuteEl.value = '00';
      alarmClockRemarkEl.innerText = '';
      alarmClockSoundEl.setAttribute('checked',true);
      fullScreenEl.setAttribute('checked',true);
      randomImgEl.setAttribute('checked',false);
      urls = [];
      index = null;
    }
    renderList()
    addAlarmClockEl.onclick = ()=>editAlarmClock();
    alarmClockHourEl.oninput = (e) => filterNum(e, 23);
    alarmClockMinuteEl.oninput = (e) => filterNum(e, 59);
    alarmClockClosureEl.onclick = closureEdit;
    alarmClockSureEl.onclick = addAlarmClock;


  </script>
</html>
